<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

    <link rel="stylesheet" th:href="@{../static/css/weadmin.css}">
</head>

<body>
<br>
<div class="weadmin-block">

    <!--    <button class="layui-btn layui-btn-danger" onclick="delAll()"><i-->
    <!--            class="layui-icon layui-icon-delete"></i>批量删除-->
    <!--    </button>-->
    <a th:href="@{/user/add}" class="layui-btn"><i class="layui-icon layui-icon-add-circle-fine"></i>添加
    </a>
    <span class="fr" style="line-height:40px">共有数据<b style='color:red' name="size" th:text="${count}"></b>条</span>
</div>

<table class="layui-table" lay-filter="test" >
    <thead>
    <tr>
        <!--        <th>-->
        <!--            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i-->
        <!--                    class="layui-icon layui-icon-ok"></i>-->
        <!--            </div>-->
        <!--        </th>-->
        <!--        <th>#</th>-->
        <th>序号</th>
        <th>用户ID</th>
        <th>用户名</th>
        <th>电话号码</th>
        <th>邮箱</th>
        <th>性别</th>
        <th>角色</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <div>
        <tbody th:each="user,status:${users}" >

        <tr>
            <!--        <td>-->
            <!--            <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i-->
            <!--                    class="layui-icon layui-icon-ok"></i></div>-->
            <!--        </td>-->
            <td th:text="${status.count}"></td>
            <td id="userid" th:text="${user.getId()}"></td>
            <td id="username" th:text="${user.getUsername()}"></td>
            <td th:text="${user.getTelephone()}"></td>
            <td th:text="${user.getEmail()}"></td>
            <td th:switch="${user.getSex()}">
                <span class="layui-badge layui-bg-green" th:case="0">女</span>
                <span class="layui-badge layui-bg-blue" th:case="1">男</span>
            </td>
            <td th:switch="${user.getRole()}">
                <span th:case="1">管理员</span>
                <span th:case="2">评委</span>
                <span th:case="3">参赛选手</span>
                <span th:case="4">观众</span>
            </td>
            <td th:switch="${user.getUserStatus()}">
                <span class="layui-badge layui-bg-blue" th:case="1">启用</span>
                <span class="layui-badge layui-bg-orange" th:case="0">注销</span>
            </td>
            <td>
                <div id="layerDemo" style="margin-bottom: 0;">
                    <button th:userid="${user.getId()}" th:username="${user.getUsername()}"
                            data-type="auto" onclick="del(this.getAttribute('userid'),this.getAttribute('username'))"
                            class="layui-btn layui-btn-danger">删除
                    </button>
                    <button onclick="eidt('/user/update',this.getAttribute('userid'))" th:userid="${user.getId()}"
                            class="layui-btn layui-btn-warm">
                        编辑
                    </button>
                    <button onclick="detail('/user/detail',this.getAttribute('userid'))" th:userid="${user.getId()}" class="layui-btn layui-btn-normal">详情</button>
                </div>
            </td>
        </tr>
        </tbody>
    </div>
</table>

<script th:src="@{../static/layui/layui.js}"></script>
<script th:src="@{../static/js/eleDel.js}" type="text/javascript"></script>
<script th:src="@{../static/mysource/js/jquery-3.3.1.min.js}"></script>
<script type="text/javascript">


    layui.use('table', function() {
        var table = layui.table;
        table.render({
            elem: '#demo'
            ,height: 312
            ,page: true //开启分页
        });
    })



    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        eidt = function (url, id) {
            layer.open({
                type: 2,
                area: ['1000px', '800px'],
                shadeClose: true,
                shade: 0.4,
                title: "编辑用户",
                btn: ['关闭'],
                moveType: 1, //拖拽模式，0或者1
                content: url + "/" + id,
                success: function (layero) {
                    var btn = layero.find('.layui-layer-btn');
                    btn.find('.layui-layer-btn0').attr({
                        href: '/user/userlist'
                    });
                }
            })

        },
            detail = function (url,id) {
                layer.open({
                    type: 2,
                    area: ['1000px', '800px'],
                    shadeClose: true,
                    shade: 0.4,
                    title: "用户详情",
                    btn: ['关闭'],
                    moveType: 1, //拖拽模式，0或者1
                    content: url + "/" + id,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '/user/userlist'
                        });
                    }
                })

            },
            del = function (userid, username) {

                layer.open({
                    type: 1,
                    title: "删除用户" //不显示标题栏
                    ,
                    closeBtn: false,
                    area: '300px;',
                    shade: 0.1,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btn: ['确定', '取消'],
                    btnAlign: 'c',
                    moveType: 1 //拖拽模式，0或者1                ,
                    ,
                    content: '<div style="padding: 50px; line-height: 22px; background-color: #b4b4b8; color: #fff; font-weight: 300;">确定要删除&nbsp;<b>' + username + '</b>&nbsp;用户吗</div>'
                    ,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '/user/del/' + userid
                        });
                    }
                });


            };
        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    })

</script>


</body>

</html>